<template>
  <div id="tabulation">
    <div class="page-top">
      <PageTop></PageTop>
    </div>
    <div class="pagecon">
      <div class="menu-out">
        <div class="toindex" @click="toIndex">
          <i class="el-icon-house"></i>
          首页
        </div>
        <div class="menu-item">
          <div
            @click="changeRouter(node.path)"
            :class="route === node.path ? 'span active' : 'span'"
            v-for="node in menuList"
            :key="node.id"
          >
            <span class="text" :to="node.path">{{ node.name }}</span>
            <i class="el-icon-close fr"></i>
          </div>
        </div>
      </div>
      <div class="list-out">
        <keep-alive>
          <transition name="slide">
            <router-view />
          </transition>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
  import PageTop from '../../components/PageTop';
  import { mapState } from 'vuex';
  export default {
    name: 'Tabulation',
    components: {
      PageTop
    },
    data() {
      return {
        route: ''
      };
    },
    computed: {
      ...mapState({
        menuList: (state) => state.systemConfig.menuList
      })
    },
    watch: {
      $route(to) {
        this.route = to.path;
      }
    },
    methods: {
      toIndex() {
        this.$router.push({ path: '/' });
      },
      changeRouter(path) {
        this.$router.push({ path: path });
      }
    }
  };
</script>

<style lang="scss" scoped>
  #tabulation {
    width: 100%;
    height: 100vh;
    background: url('../../assets/img/listbg.png') no-repeat;
    background-size: 100% 220px;
    .page-top {
      height: 90px;
      width: 100%;
    }
    .pagecon {
      width: 95%;
      height: 950px;
      background-color: #f5f8fb;
      margin: 0 auto;
      border-radius: 20px;
      padding-bottom: 30px;

      .menu-out {
        width: 100%;
        height: 50px;
        border-radius: 20px 20px 0 0;
        background-color: #eff3f9;
        .menu-item {
          display: inline-block;
          .active {
            background-color: #ffffff;
          }
          .span {
            color: $gray;
            position: relative;
            top: 3px;
            cursor: pointer;
            border-radius: 15px 15px 0 0;
            min-width: 120px;
            display: inline-block;
            height: 44px;
            line-height: 44px;
            padding: 0 15px;
            .text {
              margin-right: 10px;
              color: $gray;
              text-decoration: none;
            }
            i:hover {
              color: $blue;
            }
            i {
              position: relative;
              top: 15px;
            }
          }
        }
        .toindex:hover {
          color: $blue;
        }
        .toindex {
          display: inline-block;
          height: 50px;
          line-height: 50px;
          padding-left: 20px;
          width: 65px;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .list-out {
        margin: 0 auto;
        width: 100%;
        min-height: 900px;
        background-color: #ffffff;
        border-radius: 20px;
      }
    }
  }
</style>
